<template>
  <el-container class="home-contaner">
    <el-aside width="200px">
      <div class="title">
        <h1>新零售商户管理后台</h1>
      </div>
      <div>
        <el-menu @close="close" @open="open" :unique-opened="true" router class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#DCDFE6">
          <el-menu-item index="/main">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <div>
                <!-- @click="dpgl" -->
                <i class="el-icon-s-shop"></i>
                <span>店铺管理 <el-badge class="mark" :value="2" v-show="flag2"/></span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/storelist">店铺列表</el-menu-item>
              <el-menu-item index="/goodslist">商品列表</el-menu-item>
              <el-menu-item index="/storeaudit">开店审核<el-badge class="mark" :value="2" v-show="!flag2" /></el-menu-item>
              <el-menu-item index="/storerights">店铺权益管理</el-menu-item>
              <el-menu-item index="/industry">店铺行业管理</el-menu-item>
              <el-menu-item index="/goodscate">商品类别管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span>商圈管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/share">共享商圈管理</el-menu-item>
              <el-menu-item index="/person">个人商圈管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/order-list">订单列表</el-menu-item>
              <el-menu-item index="/order-sta">订单统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-ticket"></i>
              <span>优惠券管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/general-couppon">通用优惠券</el-menu-item>
              <el-menu-item index="/shop-couppon">店铺优惠券</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/extension-list">
            <i class="el-icon-s-unfold"></i>
            <span>推广列表</span>
          </el-menu-item>
          <el-submenu index="7">
            <template slot="title">
              <div>
                <i class="el-icon-menu"></i>
                <span>素材库管理 <el-badge class="mark" :value="2" v-show="flag"/></span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/material">官方素材管理</el-menu-item>
              <el-menu-item index="/review">素材审核 <el-badge class="mark" :value="2" v-show="!flag"/></el-menu-item>
              <el-menu-item index="/usermaterial">用户素材管理 </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-bank-card"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/cash-management">提现管理</el-menu-item>
              <el-menu-item index="/spending-details">平台支出明细</el-menu-item>
              <el-menu-item index="/income-details">平台收入明细 </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="9">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/setAccount">账号管理</el-menu-item>
              <el-menu-item index="/parameter">参数设置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>
    <el-container>
      <router-view />
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: 'HomeContaner',
  props: [''],
  data() {
    return {
      flag: true,
      flag2: true
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    open(index) {
      if (index === '2') {
        this.flag2 = false
        this.flag = true
      } else if (index === '7') {
        this.flag = false
        this.flag2 = true
      } else {
        this.flag2 = true
        this.flag = true
      }
    },
    close(index) {
      if (index === '2') {
        this.flag2 = true
      } else if (index === '7') {
        this.flag = true
      } else {
        this.flag2 = true
        this.flag = true
      }
    }
  },

  watch: {}
}
</script>
<style lang="less" scoped>
.el-container {
  height: 100%;
}
.home-contaner {
  min-width: 1287px;
  .el-aside {
    height: 100%;
    background-color: rgb(244, 244, 245);
    color: #333;
    text-align: center;
    .title {
      background-color: rgb(121, 187, 255);
      line-height: 100px;
      h1 {
        margin: 0;
        padding: 0;
        text-align: center;
      }
    }
  }
  .el-main {
    color: rgb(133, 133, 133);
  }
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
    .el-row {
      margin-top: 32px;
      padding-left: 20px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
    }
    .el-button {
      margin-left: 0;
    }
  }
}

.el-menu {
  border: 0;
  text-align: left;
}
.el-submenu {
  .el-menu-item {
    text-align: center;
  }
}
.el-menu {
  text-align: left;
  border-right: none;
}
.mark {
  align-items: center;

  margin-left: 10px;
}
</style>
